<template>
	<view>
		<view>
			<!-- <image src="https://app.lgwisdomunion/static/img/bj_liand.469cefe0.png" mode="" style="height:100vh;width: 100%;position: absolute;"></image> -->
			<view class="gui-relative" style="">
				<!-- 作品名称 -->
				<view class="gui-flex gui-align-items-center gui-border-b" style="height: 80rpx;">
					<text class="gui-margin-x gui-bold">作品名称</text>
					<view class="gui-flex gui-margin-x gui-align-items-center">
						<input placeholder="请输入作品的名称" v-model="title" class=""/>
						<text v-if="title" class="gui-icons" style="margin: 0 10rpx;" @click="close">&#xe632;</text>
					</view>
				</view>
				
				<!-- 作品简介 -->
				<view class="gui-margin-x">
					<view class="margin-y-20 gui-bold">作品简介</view>
					<textarea placeholder="对您的作品做一个简单的介绍" v-model="brief"></textarea>
				</view>
				
				<!--上传视频 -->
				<view class="gui-margin-x gui-color-gray gui-text gui-border-b" v-if="info.category.name === '视频类'">
					<view>上传视频(大小不能超过100兆)</view>
					<view class="margin-y-20 gui-color-black" v-if="video.name">
					<text>{{video.name}}</text>
					<text class="gui-icons gui-margin-x gui-color-red" @click="delVideo">&#xe632;</text>
					</view>
					<view class="Picture gui-margin gui-flex gui-align-items-center gui-justify-content-center" @click="setVideo">
						<image src="https://app.lgwisdomunion/static/img/videos.581dac98.png" style="width: 150rpx;height: 130rpx;"></image>
					</view>
				</view>
				
				<view class="gui-margin-x gui-color-gray gui-border-b gui-padding" v-if="info.category.name === '摄影类'">
					<view class="margin-y-20">上传图片</view>
						<view class="Picture gui-margin gui-relative" v-for="(item,index) in Ablum" :key="index" style="float: left;margin: 30rpx">
							<image :src="item.path" style="width: 150rpx;height: 130rpx;"></image>
							<text class="gui-icons gui-color-red" style="position: absolute;top: -10rpx;right:0rpx;" @click="delAblum(index)">&#xe632;</text>
						</view>
						<view class="Picture gui-margin gui-flex gui-align-items-center gui-justify-content-center" @click="setAblum">
							<image src="@/static/pictrue.png" style="width: 100rpx;height: 100rpx;"></image>
						</view>
				</view>
				<!-- 上传封面 -->
				<view class="gui-margin-x gui-color-gray" style="clear: both;">
					<view class="margin-y-20">上传封面</view>
					<view class="gui-flex">
						<view class="Picture gui-margin gui-flex gui-align-items-center gui-justify-content-center gui-relative" v-if="picture.length>0">
							<image :src="picture" style="width: 150rpx;height: 130rpx;"></image>
							<text class="gui-icons gui-color-red" style="position: absolute;top: -10rpx;right:0rpx;" @click="delPic">&#xe632;</text>
						</view>
						<view class="Picture gui-margin gui-flex gui-align-items-center gui-justify-content-center" @click="setPhoto">
							<image src="@/static/pictrue.png" style="width: 100rpx;height: 100rpx;"></image>
						</view>
					</view>
					<view class="" style="font-size: 20rpx;">建议上传尺寸:750*424</view>
				</view>
				<button type="default" class="b-bottom gui-border-radius gui-margin-top" @click="submit">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchName:'',
				info:{
					category:{name:''}
				},
				// 图片地址
				Photo:'',
				picture:'',
				// 作品标题
				title:'',
				// 作品简介 
				brief:'',
				jid:'',
				// 图片id
				indexImg:'',
				// 视频
				video:{},
				videoList:[],
				imgID:'',
				Ablum:[],
				AblumDetail:{},
				
			}
		},
		onLoad(opt) {
		console.log("opt",opt);
			this.jid = opt.id;
			this.getData();
			console.log("self.Ablum",this.Ablum)
		},
		methods: {
			getData(){
				this.$boya.NGet("/app/activity/get",{id:this.jid},(res)=>{
					console.log(res)
					this.info = res.data
					console.log("self.info",this.info)
				})
			},
			setPhoto(){
				let self = this
				uni.chooseImage({
					count:1,
					sizeType:['original','compressed'],
					sourceType:['album'],
					success:function(res){
						const tempFilePaths = res.tempFilePaths
						const tempFiles = res.tempFiles
						// const a = tempFilePaths.substring(5)
						self.picture = tempFilePaths[0]
						this.indexImg = tempFiles[0].lastModified
						self.Photo = tempFiles[0]
						console.log("self.Photo",self.Photo.type)
						let Data = {
							filePath: self.Photo,
							fileName:self.Photo.name,
							type:self.Photo.size
						}
						// console.log("data",Data)
						
						uni.uploadFile({
							url:self.$upload_url,
							data:Data,
							success:function(res){
								let data=JSON.parse(res.data);
								console.log(data.data[0].id);
								self.imgID=data.data[0].id;
								console.log(self.imgID);
								console.log("Data",Data)
							}
						})
					}
				})
			},
			setAblum(){
				console.log("aaa")
				let self = this
				uni.chooseImage({
					sizeType:['original','compressed'],
					sourceType:['album'],
					success:function(res){
						const tempFilePaths = res.tempFilePaths
						const tempFiles = res.tempFiles
						let m = [];
						for(let i = 0 ; i< tempFiles.length;i++){
							m = tempFiles[i]
							self.Ablum.push(m)
						}
						console.log("self.Ablum",self.Ablum)
						uni.uploadFile({
							url:self.$upload_url,
							// filePath: self.Ablum,
							// name:"file",
							success:function(res){
								console.log(res)
								let data = JSON.parse(res.data)
								self.AblumDetail.push(data.data[0].id);
								console.log("AblumDetail",self.AblumDetail.id)
								console.log("data",data)
								if(data.code === '1'){
									uni.showToast({
										title:data.msg,
										icon:"success"
									})
								} else {
									uni.showToast({
										title:data.msg,
										icon:"none"
									})
								}
							}
						})
					}
				})
			},
			setVideo(){
				let self = this
				uni.chooseVideo({
					 count: 1,
					 sourceType: ['camera', 'album'],
					 success:function(res){
						 console.log("上传视频成功",res)
						 const tempFile = res.tempFile
						 self.video = tempFile
						 // self.videoName = tempFile.name
						 // console.log("this.videoName.length",self.videoName)
						 // self.fid = tempFile.lastModified
						 console.log("self.video",self.video)
						 uni.uploadFile({
							 url:self.$upload_url,
							 // filePath: res.tempFilePath,
							 // name: 'files',
							 success(res) {
							 	console.log("setVideo->res",res)
								let data = JSON.parse(res.data)
								self.videoList.push(data.data[0].id);
								console.log(self.videoList)
							 }
						 })
					 }
				})
			},
			submit(){
				// let data = {
				// 	actId:this.jid,
				// 	title:this.title,
				// 	content:'',
				// 	brief:this.brief,
				// 	// 视频id
				// 	fid:'',
				// 	// 封面id
				// 	indexImg:this.indexImg,
				// 	type:1,
				// 	// 视频文件名
				// 	fileName:this.videoName,
				// }
				let data = {
					act_id:this.jid,
					title:this.title,
					content:'',
					brief:this.brief,					
					index_img:this.imgID,
					type:2,
				}
				if(this.info.category.name=='视频类')
				{
					data.fid=this.videoList.join(",");
				}
				if(this.info.category.name=='摄影类')
				{
					data.fid=this.AblumDetail.join(",");
				}
				
				if(this.title == ''){
					uni.showToast({
						title:"请输入作品名称！",
						icon:"none"
					})
				  }
				if(this.brief == ''){
					uni.showToast({
						title:"请输入作品简介！",
						icon:"none"
					})
				}
				if(this.Ablum ===''|| this.Ablum == null){
					uni.showToast({
						title:"请上传作品！",
						icon:"none"
					})
				}
				if(this.picture === ''){
					uni.showToast({
						title:"请上传封面！",
						icon:"none"
					})
				}
				// console.log(data)
				this.$boya.NPost("/app/activity/online_vedio/insert",data,(res)=>{
					
						uni.showToast({
							title:"提交成功",
							icon:"success"
						})
						setTimeout(() => {
						        uni.hideToast();
						        //关闭提示后跳转
						        uni.navigateBack({
						         delta: 1
						        });
						       }, 1500)
					
				})
			},
			delVideo(){
				this.video=''
			},
			delPic(){
				this.picture=''
			},
			delAblum(d){
				this.Ablum.splice(d, 1);
			},
			close(){
				this.title=''
			}
		}
	}
</script>

<style>
	.b-bottom{
		  background: linear-gradient(to right, rgb(244,104,57), rgb(251,88,98));
		  width:400rpx;
		  height: 80rpx;
		  color: aliceblue;
	}
	.Picture{
		width: 150rpx;
		height: 130rpx;
		background-color: rgb(240,240,240);
	}
	.margin-y-20{
		margin: 20rpx 0;
	}
</style>
